那這邊我們會需要來另外做一個驗證的窗口以及導向朋友清單的功能。當然，我們的初步功能就是有朋友清單可以讓我們點選來進行通訊。至於程式碼都是由前面的介紹，稍作修改而成，算是相對比較容易的部分。但是有一點很重要就是Security，我們會另外拉出一個days去介紹。這邊先主要介紹功能如何實作。

首先就先引入函式庫

require 'rubygems'
require 'sinatra'
require 'mongo'
require 'json/ext'
require 'json'
require 'haml'

上述都是前面章節介紹並且在這邊會使用到的部分。因為我們是建立在sinatra架構下，前面必須先完成套件安裝，Sinatra 、mongoDB、JSON、Haml。

接下來就是設定Configuration

configure do 
    # session設定
    enable :sessions
    set :session_secret, 'booit' 
    # 使用mongoDB
    conn = MongoClient.new("localhost",27017)
    set :mongo_connection, conn
    set :mongo_db, conn.db('Boo')
end

接下來定義method來幫助我們操作mongoDB。

helpers do 
    # 搜尋mongoDB由id
    def mongo_id val
        BSON::ObjectId.from_string(val)
    end

    # 由id搜尋密碼欄位
    def password_by_id id
        id = mongo_id(id) if String === id
            @obj = settings.mongo_db['accounts'].find_one(:_id => id).to_json
        parsed = JSON.parse(@obj)
        @password = parsed["password"]
    end

    # 由ID搜尋使用者名稱
    def username_by_id id
        id = mongo_id(id) if String === id
            @obj = settings.mongo_db['accounts'].find_one(:_id => id).to_json
        parsed = JSON.parse(@obj)
        return parsed["username"].to_s
    end

    # 由id搜尋朋友群
    def friends_by_id id
        id = mongo_id(id) if String === id
            @obj = settings.mongo_db['accounts'].find_one(:_id => id).to_json
        parsed = JSON.parse(@obj)              

        friends = parsed["friends"]

        if friends.nil?
            return nil.to_a.to_json
        else

            return friends.to_json
        end
    end

    # 確認使用者名稱是否存在，存在則導向朋友名單，不存在則重新登入
    def check_username (name,pwd)
        @lookup_result = settings.mongo_db['accounts'].find_one(:username => name).to_json

        if @lookup_result.to_s == "null"
            session.clear
            haml :notfound
        else

           parsed = JSON.parse(@lookup_result)
           @password_l = parsed["password"]
           @session_id = parsed["_id"]["$oid"]

           if @password_l.eql?(pwd)
               session[:id] = @session_id
               redirect 'friends'
           else

               # need to make a simeple error redirect page
               session.clear
               redirect 'hello'
           end
        end
    end
end

可以看到我們運用session還有mongoDB來幫助我們做驗證帳戶的效果以及查詢朋友的功能。那接下來就是定義路由。

# 首頁! 一開始登入為/hello 頁面，並輸出至hello.haml
get '/hello' do
    haml :hello
end

這裡要稍微注意一下，sinatra架構雖非是完全按照MVC架構，但如果你要輸出頁面是在/views下以及使用CSS,內部JavaScript是在/public下。

那我們來定義一開始的登入頁面

!!!
%html
    %head
        %title login
    %body
        %form{:action => "login",:name => "login", :method => "post"}
            .username username:
            %input{:type => "text" , :name => "username"}
            .password password:
            %input{:type => "password", :name => "password"}
            %input{:type => "submit" , :value => "login"}

好的，那這邊就可以看到我們一開始的登入頁面。

那我們繼續定義表單送出的部分，導向/login 路由。

post '/login' do
    @username = params[:username]
    @password = params[:password] 

    check_username(params[:username],params[:password])
end

當呼叫上述方法之後，會進行驗證，如果正確則導向/friends路由，如果錯誤則導向/hello 登入頁面。

/friends路由如下:

get '/friends' do
    # 如果無session資料則清除session導回/hello 登入頁面
    if session[:id] == nil
        session.clear
        redirect 'hello'
    else 

        # 如果有登入資訊(驗證完畢)則導向friends_list 朋友清單頁面
        if session[:id].to_s.eql?(mongo_id(session[:id]).to_s) 
            # this part needs a algorithm to send ticket mechanism 
            login_usr = username_by_id(session[:id])
            friends_json = friends_by_id(session[:id])
            haml :friends_list , :locals => {:user_name => "#{login_usr}",:friends_list => friends_json}
        else
            "You are not permissioned to login!"
        end
    end
end

接下來我們就來看輸出friends_list.haml頁面。

!!!5
%html
    %head
        %title Friends
        %script{:type => "text/javascript",:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"}
        %script{:type => "text/javascript",:src => "to_client.js"}
    %body
        %h1{:id => "username"} #{locals[:user_name]}
        %p choose your friends:
        - JSON.parse(friends_list).each do |f|
        .friends{:id => "#{f.to_s}"}= f.to_s
        - end unless @do_nothing
        %form{:action =>"chat",:method =>"post",:id => "form"}
            %input{:type => "hidden",:name => "chat_f",:id => "chat_f",:value => "123"}
            -#%button{:type => "submit"} submit

畫面輸出為

朋友關係圖，以及資料庫的建立我們在前些章節mongoDB已經輸入完畢。

這邊先介紹到輸出朋友清單，下一部分我們會介紹使用jQuery以及歷史訊息的製作。